import React, { useEffect } from 'react'
import EchartsReact from "echarts-for-react"
export default function Botthree(props) {
  const color=props.color
  const option = {
    color: `${color}`,
    

    tooltip: {
      trigger: 'item'
    },
    visualMap: {
      show: false,
      min: 80,
      max: 600,
      inRange: {
        colorLightness: [0, 1]
      }
    },
    legend : {
      data : ['手机拍的现场版','翻唱','尤克里里的演奏','该视频已删除','找到了'],
      textStyle:{
        color : 'white'
      },
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        data: [
          { value: 335, name: '翻唱' },
          { value: 310, name: '尤克里里的演奏' },
          { value: 274, name: '该视频已删除' },
          { value: 235, name: '找到了' },
          { value: 400, name: '手机拍的现场版' }
        ].sort(function (a, b) {
          return a.value - b.value;
        }),
        roseType: 'radius',
        label: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        labelLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          },
          smooth: 0.2,
          length: 10,
          length2: 20
        },
        // itemStyle: {
        //   color: '#c23531',
        //   shadowBlur: 200,
        //   shadowColor: 'rgba(0, 0, 0, 0.5)'
        // },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx) {
          return Math.random() * 200;
        }
      }
    ]
  };
  return (
    <EchartsReact style={{height:"100%",width:"100%"}} option={option} />
  )
}
